<template>
  <div class="main">
    <el-form :inline="true" label-width="120px" labelPosition="left" :model="get_resources">
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="播出日期">
            <el-date-picker
              style="width:300px"
              type="daterange"
              v-model="get_resources.player_date"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="媒介">
            <el-select
              v-model="get_resources.medium_public.get_medium"
              style="width:300px;"
              value-key="id"
              @change="mediumChange"
              placeholder="请选择"
            >
              <el-option v-for="item in mediumList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="频道">
            <el-select
              v-model="get_resources.medium_public.get_media"
              value-key="id"
              @change="meidaChange"
              style="width:300px;"
              placeholder="请选择"
            >
              <el-option v-for="item in mediaList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="节目">
            <el-select
              v-model="get_resources.medium_public.get_program"
              style="width:300px;"
              value-key="id"
              @change="programChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in programList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="资源类型">
            <el-select
              v-model="get_resources.medium_public.get_resource"
              value-key="id"
              @change="resourceTypeChange"
              style="width:300px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in resourceTypeList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="资源">
            <el-select v-model="get_resources.id" style="width:300px;" placeholder="请选择">
              <el-option
                v-for="item in resourceList"
                :key="item.id"
                :label="item.resources_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="时长">
            <el-select v-model="get_resources.often" style="width:300px;" placeholder="请选择">
              <el-option
                v-for="item in ofenList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="备注">
            <el-input v-model="get_resources.remark" style="width:300px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="选择广告主">
            <span v-if="sales.get_admin_info || !sales">{{sales.get_admin_info.name}}</span>
            <span v-if="sales">{{sales.name}}</span>
            <el-button type="text" @click="handleChoseAddr">点击选择</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <div class="buttonBox">
        <el-button type="primary" @click="save" v-if="!addObj">保存</el-button>
        <el-button type="primary" @click="handleEditSave" v-else>保存修改</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </el-row>
    <el-dialog
      title="选择广告主"
      :visible.sync="isShowAddr"
      destroy-on-close
      append-to-body
      center
      width="60%"
    >
      <choseAddr :sales="sales" @saleChoose="saleChoose"></choseAddr>
    </el-dialog>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import {
  getmediaINFO,
  getChannel,
  getShow,
  GETresource_list,
  getResourceTypeList,
  timeRange
} from "../../../api/Salesman.js";

import { SETDATE } from "@/api/System.js";
// import formatEveryDay from "./timeFormat.js";
import choseAddr from "../../add_contract/components/choseAdder";
import formatEveryDay from "../../add_contract/components/timeFormat.js";
// import generateUUID from "./uuid.js";
export default {
  components: {
    choseAddr
  },
  props: ["addObj", "salesObj"],
  data() {
    return {
      get_resources: {
        id: "",
        resources_name: "",
        
        uid:-1,
        often:'',
        player_date: "",
        remark:'',
        medium_public: {
          //   meijie
          get_medium: {},
          //   ziyuanleixin
          get_resource: {},
          //   jiemu
          get_program: {},
          //   pingdao
          get_media: {}
        }
      },
      mediumList: [],
      mediaList: [],
      programList: [],
      resourceTypeList: [],
      resourceList: [],
      ofenList: [],
      isShowAddr: false,
      sales: {}
    };
  },
  methods: {
    handleChoseAddr() {
      this.sales = { id: "" };
      this.isShowAddr = true;
    },
    saleChoose(data) {
      this.sales = data;
      this.isShowAddr = false;
    },
    changeCostType() {
      this.get_resources.cost_type == 1
        ? (this.get_resources.cost_type = 2)
        : (this.get_resources.cost_type = 1);
    },
    changeFeesType() {
      this.get_resources.fees_type == 1
        ? (this.get_resources.fees_type = 2)
        : (this.get_resources.fees_type = 1);
    },
    //   获取媒介
    getMediumList() {
      getmediaINFO({}).then(res => {
        if (res.code == 200) {
          this.mediumList = res.data.mediums;
        } else {
          this.$message.error("获取媒介失败,请关闭重试");
        }
      });
    },
    mediumChange(e) {
      console.log(e);
      this.get_resources.medium_public.get_medium = e;
    },
    // 获取频道
    getChannelList(id) {
      let data = {
        medium_id: [id]
      };
      getChannel(data).then(res => {
        if (res.code == 200) {
          this.mediaList = res.data;
        } else {
          this.$message.error("获取频道失败,请关闭重试");
        }
      });
    },
    meidaChange(e) {
      this.get_resources.medium_public.get_media = e;
    },
    // 获取节目
    getProgramList(id) {
      let data = {
        media_id: [id]
      };
      getShow(data).then(res => {
        if (res.code == 200) {
          this.programList = res.data;
        } else {
          this.$message.error("获取节目失败,请关闭重试");
        }
      });
    },
    programChange(e) {
      this.get_resources.medium_public.get_program = e;
    },
    getResourceType() {
      let data = {
        medium_id: this.getMediumId
      };
      getResourceTypeList({ ...data }).then(res => {
        if (res.code == 200) {
          this.resourceTypeList = res.data;
        } else {
          this.$message.error("获取资源类型失败,请关闭重试");
        }
      });
    },
    resourceTypeChange(e) {
      this.get_resources.medium_public.get_resource = e;
    },
    getResourceList() {
      let data = {
        media_id: this.get_resources.medium_public.get_media.id || "",
        table_name:
          this.get_resources.medium_public.get_medium.table_name || "",
        resources_id: this.get_resources.medium_public.get_resource.id || "",
        program_id: this.get_resources.medium_public.get_program.id || "",
        search_word: "",
        per: 9999999
      };
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.resourceList = res.data.data;
        } else {
          this.$message.error("获取资源失败,请关闭重试");
        }
      });
    },
    getTimeList(id) {
      let data = {
        medium_public_id: id
      };
      timeRange({ ...data }).then(res => {
        if (res.code == 200) {
          this.ofenList = res.data;
        } else {
          this.$message.error("获取资源时间错误，请重新选择");
        }
      });
    },
    save() {
      if (!this.get_resources.id) {
        this.$message.error("请选择资源");
      } else if (JSON.stringify(this.sales) == "{}") {
        this.$message.error("请选择广告主");
      } else if (this.get_resources.player_date == '' || this.get_resources.player_date == []) {
        this.$message.error("请选择播放日期");
      } else {
        let obj = {
          get_medium_public: {
            resources_name: this.get_resources.medium_public.get_resource.name,
            id:this.get_resources.id,
            ...this.get_resources.medium_public
          },
          contract: {
            get_media_up: this.sales.get_admin_info,
            cycle_time: this.get_resources.player_date[0] + '~' + this.get_resources.player_date[1]
          },
          player_date:JSON.stringify({
              type: 1,
              val: formatEveryDay(this.get_resources.player_date[0], this.get_resources.player_date[1])
            }),
          uid:this.get_resources.uid,
          remark: this.get_resources.remark,
          often:this.get_resources.often,
          isAdd:this.addObj ? false:true
        };

        this.$emit("saveResource", obj);
      }
    },
    handleEditSave() {
      if (!this.get_resources.id) {
        this.$message.error("请选择资源");
      } else if (JSON.stringify(this.sales) == "{}") {
        this.$message.error("请选择广告主");
      } else if (this.get_resources.player_date == '' || this.get_resources.player_date == []) {
        this.$message.error("请选择播放日期");
      } else {
        let obj = {
          get_medium_public: {
            resources_name: this.get_resources.medium_public.get_resource.name,
            id:this.get_resources.id,
            ...this.get_resources.medium_public
          },
          contract: {
            get_media_up: this.sales.get_admin_info,
            cycle_time: this.get_resources.player_date[0] + '~' + this.get_resources.player_date[1]
          },
          player_date:JSON.stringify({
              type: 1,
              val: formatEveryDay(this.get_resources.player_date[0], this.get_resources.player_date[1])
            }),
          uid:this.get_resources.uid,
          remark: this.get_resources.remark,
          often:this.get_resources.often,
          isAdd:this.addObj ? false:true
        };
        this.$emit("editSave", obj);
      }
    }
  },
  computed: {
    //   获取媒介id
    getMediumId() {
      return this.get_resources.medium_public.get_medium.id;
    },
    //   获取频道id
    getMediaId() {
      return this.get_resources.medium_public.get_media.id;
    },
    //   获取节目id
    getProgramId() {
      return this.get_resources.medium_public.get_program.id;
    },
    // 获取资源类型
    getResourceId() {
      return this.get_resources.medium_public.get_resource.id;
    },
    // 获取资源id
    getResourceSelfId() {
      return this.get_resources.id;
    }
  },
  watch: {
    getMediumId(newVal, oldVal) {
      if (newVal && newVal == "") {
        this.get_resources.medium_public.get_media = {};
      }
      this.getChannelList(newVal);
      this.getResourceType();
      this.getResourceList();
    },
    getMediaId(newVal, oldVal) {
      if (newVal && newVal == "") {
        this.get_resources.medium_public.get_program = {};
      }
      this.getProgramList(newVal);
      this.getResourceList();
    },
    getProgramId(newVal, oldVal) {
      this.getResourceList();
    },
    getResourceId(newVal, oldVal) {
      this.getResourceList();
    },
    getResourceSelfId(newVal, oldVal) {
      this.getTimeList(newVal);
    }
  },
  mounted() {
    if (this.addObj) {
      this.get_resources = this.addObj;
      this.ofenList.forEach((e,i) => {
        if (e.name = addObj.often) {
          this.get_resources.often = e.id
        }
      });
    }
    if (this.salesObj) {
      this.sales = this.salesObj;
    }
    this.getMediumList();
  }
};
</script>

<style scoped lang='scss'>
.main {
  width: 100%;
  height: 100%;
}
.feeControl {
  font-size: 14px;
  color: #169bd5;
  cursor: pointer;
  line-height: 36px;
}
.buttonBox {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
</style>